import React, { FC } from "react"
import useGetComponentInfo from "../../../../hooks/useGetComponentInfo"
import { ComponentPropsType, getComponentConfigByType } from "../../../../components/QuestionComponents"
import { useDispatch } from "react-redux"
import { changeComponentProps } from "../../../../store/componentsReducer"

const NoPros: FC = () => {
    return <div style={{ textAlign: "center" }}>请先选择组件</div>
}

const ComponentProp: FC = () => {
    const { selectedComponent } = useGetComponentInfo()
    const dispatch = useDispatch()

    // 检查是否为null  不要用 ===
    if (selectedComponent == null) return <NoPros />

    const { type, props, isLocked, isHidden } = selectedComponent

    // 根据type获取组件的配置
    const componentConfig = getComponentConfigByType(type)
    if (componentConfig == null) return <NoPros />

    function changeProps(newProps: ComponentPropsType) {
        if (selectedComponent == null) return

        const { fe_id } = selectedComponent
        // 修改当前选中组件的属性
        // console.log("newProps:", fe_id, newProps)
        dispatch(changeComponentProps({ fe_id, newProps }))
    }

    const { PropComponent } = componentConfig
    // console.log(JSON.stringify(props))

    return <PropComponent {...props} onChange={changeProps} disabled={isLocked || isHidden} />
}

export default ComponentProp
